<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>存储记录 - 物流信息管理系统</title>
    <!-- 先加载 jQuery -->
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <!-- 再加载 Bootstrap -->
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.1.3/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdn.bootcdn.net/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
    <style>
        body {
            min-height: 100vh;
            background-color: #f8f9fa;
        }
        .navbar {
            position: fixed;
            top: 0;
            right: 0;
            left: 0;
            z-index: 1030;
            height: 60px;
            background-color: #fff;
            box-shadow: 0 2px 4px rgba(0,0,0,.1);
        }
        .sidebar {
            position: fixed;
            top: 60px;
            bottom: 0;
            left: 0;
            z-index: 1020;
            width: 240px;
            background-color: #fff;
            box-shadow: 1px 0 4px rgba(0,0,0,.1);
            overflow-y: auto;
        }
        .sidebar-sticky {
            padding-top: 1rem;
        }
        .main-content {
            margin-left: 240px;
            padding: 80px 20px 20px;
            min-height: calc(100vh - 60px);
        }
        .nav-link {
            color: #333;
            padding: 10px 20px;
            display: block;
            border-radius: 4px;
            margin: 4px 8px;
        }
        .nav-link:hover {
            background-color: #f8f9fa;
            text-decoration: none;
        }
        .nav-link.active {
            background-color: #0d6efd;
            color: white;
        }
        .nav-link i {
            margin-right: 10px;
            width: 20px;
            text-align: center;
        }
        .card {
            margin-bottom: 20px;
            border: none;
            box-shadow: 0 0 10px rgba(0,0,0,.05);
            border-radius: 8px;
        }
        .table th {
            background-color: #f8f9fa;
            font-weight: 600;
        }
        .btn-icon {
            padding: 0.25rem 0.5rem;
            margin: 0 0.25rem;
        }
        .search-box {
            background-color: #fff;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 0 10px rgba(0,0,0,.05);
            margin-bottom: 20px;
        }
        .status-badge {
            padding: 5px 10px;
            border-radius: 15px;
            font-size: 0.9em;
        }
        .status-in-storage {
            background-color: #28a745;
            color: white;
        }
        .status-out-storage {
            background-color: #dc3545;
            color: white;
        }
    </style>
</head>
<body>
    <!-- 顶部导航栏 -->
    <nav class="navbar navbar-expand-lg navbar-light">
        <div class="container-fluid">
            <a class="navbar-brand" href="/">物流信息管理系统</a>
            <div class="d-flex align-items-center">
                <span class="navbar-text me-3" id="userInfo">
                    欢迎，<span id="username"></span>
                </span>
                <button class="btn btn-outline-danger btn-sm" onclick="logout()">退出登录</button>
            </div>
        </div>
    </nav>

    <!-- 侧边栏 -->
    <nav class="sidebar">
        <div class="sidebar-sticky">
            <ul class="nav flex-column">
                <li class="nav-item">
                    <a class="nav-link" href="/dashboard">
                        <i class="fas fa-tachometer-alt"></i>
                        仪表盘
                    </a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="/order">
                        <i class="fas fa-box"></i>
                        订单管理
                    </a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="/transport">
                        <i class="fas fa-truck"></i>
                        运输管理
                    </a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="/warehouse">
                        <i class="fas fa-warehouse"></i>
                        仓库管理
                    </a>
                </li>
                <li class="nav-item">
                    <a class="nav-link active" href="/storage">
                        <i class="fas fa-database"></i>
                        存储记录
                    </a>
                </li>
            </ul>
        </div>
    </nav>

    <!-- 主要内容区域 -->
    <main class="main-content">
        <div class="container-fluid">
            <div class="search-box">
                <div class="row">
                    <div class="col-md-3">
                        <div class="form-group">
                            <label>订单号</label>
                            <input type="text" class="form-control" id="searchOrderNo" placeholder="请输入订单号">
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="form-group">
                            <label>仓库</label>
                            <select class="form-control" id="searchWarehouseId">
                                <option value="">全部</option>
                            </select>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="form-group">
                            <label>状态</label>
                            <select class="form-control" id="searchStatus">
                                <option value="">全部</option>
                                <option value="在库">在库</option>
                                <option value="已出库">已出库</option>
                            </select>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="form-group">
                            <label>&nbsp;</label>
                            <button class="btn btn-primary w-100" onclick="searchStorages()">搜索</button>
                        </div>
                    </div>
                </div>
            </div>

            <div class="card">
                <div class="card-header d-flex justify-content-between align-items-center">
                    <h5 class="mb-0">存储记录列表</h5>
                    <button class="btn btn-primary" onclick="showCreateStorageModal()">
                        <i class="fas fa-plus"></i> 新增存储记录
                    </button>
                </div>
                <div class="card-body">
                    <div class="table-responsive">
                        <table class="table table-hover">
                            <thead>
                                <tr>
                                    <th>ID</th>
                                    <th>订单号</th>
                                    <th>仓库</th>
                                    <th>存储位置</th>
                                    <th>状态</th>
                                    <th>入库时间</th>
                                    <th>预计出库时间</th>
                                    <th>备注</th>
                                    <th>操作</th>
                                </tr>
                            </thead>
                            <tbody id="storageList">
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </main>

    <!-- 创建存储记录模态框 -->
    <div class="modal fade" id="createStorageModal" tabindex="-1">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">新增存储记录</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    <form id="createStorageForm">
                        <div class="mb-3">
                            <label class="form-label">订单号</label>
                            <input type="text" class="form-control" name="orderNo" required>
                        </div>
                        <div class="mb-3">
                            <label class="form-label">仓库</label>
                            <select class="form-control" name="warehouseId" required>
                                <option value="">请选择仓库</option>
                            </select>
                        </div>
                        <div class="mb-3">
                            <label class="form-label">存储位置</label>
                            <input type="text" class="form-control" name="location" required>
                        </div>
                        <div class="mb-3">
                            <label class="form-label">入库时间</label>
                            <input type="datetime-local" class="form-control" name="storageTime" required>
                        </div>
                        <div class="mb-3">
                            <label class="form-label">预计出库时间</label>
                            <input type="datetime-local" class="form-control" name="expectedOutTime">
                        </div>
                        <div class="mb-3">
                            <label class="form-label">备注</label>
                            <textarea class="form-control" name="remark" rows="3"></textarea>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-primary" onclick="createStorage()">确定</button>
                </div>
            </div>
        </div>
    </div>

    <!-- 查看存储记录模态框 -->
    <div class="modal fade" id="viewStorageModal" tabindex="-1">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">存储记录详情</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    <div class="row">
                        <div class="col-md-6">
                            <p><strong>ID：</strong><span id="viewId"></span></p>
                            <p><strong>订单号：</strong><span id="viewOrderNo"></span></p>
                            <p><strong>仓库：</strong><span id="viewWarehouseName"></span></p>
                            <p><strong>存储位置：</strong><span id="viewLocation"></span></p>
                        </div>
                        <div class="col-md-6">
                            <p><strong>状态：</strong><span id="viewStatus"></span></p>
                            <p><strong>入库时间：</strong><span id="viewStorageTime"></span></p>
                            <p><strong>预计出库时间：</strong><span id="viewExpectedOutTime"></span></p>
                            <p><strong>备注：</strong><span id="viewRemark"></span></p>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">关闭</button>
                </div>
            </div>
        </div>
    </div>

    <!-- 移除底部的 jQuery 引用，因为已经在头部加载了 -->
    <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.1.3/js/bootstrap.bundle.min.js"></script>
    <script>
        // 确保 DOM 加载完成后再执行
        $(document).ready(function() {
            loadStorages();
            loadWarehouses();
        });

        function loadStorages() {
            $.get('/api/storage/list', function(res) {
                console.log('Storage list response:', res); // 添加调试日志
                if (res.code === 200) {
                    const storages = res.data;
                    let html = '';
                    storages.forEach(storage => {
                        html += `
                            <tr>
                                <td>${storage.id}</td>
                                <td>${storage.orderNo || '-'}</td>
                                <td>${storage.warehouseName || '-'}</td>
                                <td>${storage.location || '-'}</td>
                                <td><span class="status-badge ${storage.status === '在库' ? 'status-in-storage' : 'status-out-storage'}">${storage.status || '-'}</span></td>
                                <td>${storage.storageTime ? new Date(storage.storageTime).toLocaleString() : '-'}</td>
                                <td>${storage.expectedOutTime ? new Date(storage.expectedOutTime).toLocaleString() : '-'}</td>
                                <td>${storage.remark || '-'}</td>
                                <td>
                                    <button class="btn btn-sm btn-info" onclick="viewStorage(${storage.id})">
                                        <i class="fas fa-eye"></i>
                                    </button>
                                    <button class="btn btn-sm btn-danger" onclick="deleteStorage(${storage.id})">
                                        <i class="fas fa-trash"></i>
                                    </button>
                                </td>
                            </tr>
                        `;
                    });
                    $('#storageList').html(html);
                } else {
                    console.error('Failed to load storages:', res.message);
                }
            }).fail(function(jqXHR, textStatus, errorThrown) {
                console.error('AJAX error:', textStatus, errorThrown);
            });
        }

        function loadWarehouses() {
            $.get('/api/warehouse/list', function(res) {
                console.log('Warehouse list response:', res); // 添加调试日志
                if (res.code === 200) {
                    const warehouses = res.data;
                    let html = '<option value="">请选择仓库</option>';
                    warehouses.forEach(warehouse => {
                        html += `<option value="${warehouse.id}">${warehouse.name}</option>`;
                    });
                    $('select[name="warehouseId"], #searchWarehouseId').html(html);
                } else {
                    console.error('Failed to load warehouses:', res.message);
                }
            }).fail(function(jqXHR, textStatus, errorThrown) {
                console.error('AJAX error:', textStatus, errorThrown);
            });
        }

        function searchStorages() {
            const orderNo = $('#searchOrderNo').val();
            const warehouseId = $('#searchWarehouseId').val();
            const status = $('#searchStatus').val();
            
            $.get('/api/storage/search', { orderNo, warehouseId, status }, function(res) {
                console.log('Search response:', res); // 添加调试日志
                if (res.code === 200) {
                    const storages = res.data;
                    let html = '';
                    storages.forEach(storage => {
                        html += `
                            <tr>
                                <td>${storage.id}</td>
                                <td>${storage.orderNo || '-'}</td>
                                <td>${storage.warehouseName || '-'}</td>
                                <td>${storage.location || '-'}</td>
                                <td><span class="status-badge ${storage.status === '在库' ? 'status-in-storage' : 'status-out-storage'}">${storage.status || '-'}</span></td>
                                <td>${storage.storageTime ? new Date(storage.storageTime).toLocaleString() : '-'}</td>
                                <td>${storage.expectedOutTime ? new Date(storage.expectedOutTime).toLocaleString() : '-'}</td>
                                <td>${storage.remark || '-'}</td>
                                <td>
                                    <button class="btn btn-sm btn-info" onclick="viewStorage(${storage.id})">
                                        <i class="fas fa-eye"></i>
                                    </button>
                                    <button class="btn btn-sm btn-danger" onclick="deleteStorage(${storage.id})">
                                        <i class="fas fa-trash"></i>
                                    </button>
                                </td>
                            </tr>
                        `;
                    });
                    $('#storageList').html(html);
                } else {
                    console.error('Search failed:', res.message);
                }
            }).fail(function(jqXHR, textStatus, errorThrown) {
                console.error('AJAX error:', textStatus, errorThrown);
            });
        }

        function showCreateStorageModal() {
            $('#createStorageForm')[0].reset();
            new bootstrap.Modal('#createStorageModal').show();
        }

        function createStorage() {
            const formData = {};
            $('#createStorageForm').serializeArray().forEach(item => {
                formData[item.name] = item.value;
            });
            
            $.ajax({
                url: '/api/storage',
                type: 'POST',
                contentType: 'application/json',
                data: JSON.stringify(formData),
                success: function(res) {
                    if (res.code === 200) {
                        bootstrap.Modal.getInstance('#createStorageModal').hide();
                        loadStorages();
                    } else {
                        alert(res.message);
                    }
                }
            });
        }

        function viewStorage(id) {
            $.get('/api/storage/' + id, function(res) {
                if (res.code === 200) {
                    const storage = res.data;
                    $('#viewId').text(storage.id);
                    $('#viewOrderNo').text(storage.orderNo);
                    $('#viewWarehouseName').text(storage.warehouseName);
                    $('#viewLocation').text(storage.location || '-');
                    $('#viewStatus').text(storage.status);
                    $('#viewStorageTime').text(storage.storageTime ? new Date(storage.storageTime).toLocaleString() : '-');
                    $('#viewExpectedOutTime').text(storage.expectedOutTime ? new Date(storage.expectedOutTime).toLocaleString() : '-');
                    $('#viewRemark').text(storage.remark || '-');
                    new bootstrap.Modal('#viewStorageModal').show();
                }
            });
        }

        function deleteStorage(id) {
            if (confirm('确定要删除这条存储记录吗？')) {
                $.ajax({
                    url: '/api/storage/' + id,
                    type: 'DELETE',
                    success: function(res) {
                        if (res.code === 200) {
                            loadStorages();
                        } else {
                            alert(res.message);
                        }
                    }
                });
            }
        }
    </script>
</body>
</html> 